<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.tab{
				display: flex;
				
			}
			.item{
				border-right: 1px solid purple;
				border-top: 1px solid purple;
				
				padding: 10px;
				text-decoration: none;
			}
			.item:nth-child(1){
				border-left: 1px solid purple;
			}
			.image{
				border-right: 1px solid purple;
				border-bottom: 1px solid purple;
				border-left: 1px solid purple;
				border-top: 1px solid purple;
				width: 500px;
				height: 500px;
			}
			.active{
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tab">
				
				<a href="" :class="['item',currentIndex==index?'active':'']" @click.prevent="handle(index,$event)" v-for="(item,index) in list" v-key="item.id">
				{{item.title}}</a>
	
			</div>
			<div class="image">{{info}}</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				currentIndex:0,
				info:'',
				list:[
					{id:1,title:'apple'},
					{id:2,title:'orange'},
					{id:3,title:'liuqi'},
					
					]
			},
			methods:{
				handle(index,e){
					this.currentIndex = index;
					this.info = e.target.innerHTML;
					
				}
			}
		})
	</script>
</html>
